﻿<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>详情</title>
    <meta name="keywords" content="详情" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <script src="/assets/js/jquery-1.8.2.min.js"></script>
    <style>
        .corg {
            color: green;
            background-color: rgba(46, 204, 113, 0.2);
        }

        .corr {
            color: rgb(235, 77, 92);
            background-color: rgba(211, 84, 0, 0.2);
        }

        .corg2 {
            color: green;
        }


        .corr2 {
            color: rgb(235, 77, 92);
        }
    </style>
</head>
<body style="height: 100%;">
    <div style="max-width:1250px;width: 405px;position:absolute;">
        <div id="container" style="min-height:410px"></div>
        <!--<div id="divprice" style="position:absolute;right:20px;top:20px;line-height:20px;font-size:9px;color:#666;"><span style="width:60px;display:inline-block;background-color:#999;text-align:center;cursor:pointer;font-weight:bolder;font-size:150%;color:#fff;" onclick="changeSet(1);">白色</span>&nbsp;<span style="width:60px;display:inline-block;background-color:#999;text-align:center;cursor:pointer;font-weight:bolder;font-size:150%;color:#000;" onclick="changeSet(0);">黑色</span></div>-->
        <div id="divprice" style="position:absolute;right:20px;top:45px;line-height:30px;font-size:9px;color:#666;"> 现价：<span id="spP" style="border-radius:3px;padding:0 3px;width:75px;display:inline-block;font-weight:bolder;font-size:133%;">0</span> 买一：<span id="spB1" style="border-radius:3px;padding:0 3px;width:75px;display:inline-block;padding-right:10px;font-weight:bolder;font-size:133%;">0</span> 卖一：<span id="spS1" style="border-radius:3px;padding:0 3px;width:75px;display:inline-block;font-weight:bolder;font-size:133%;">0</span></div>
        <div id="divprice" style="position:absolute;right:20px;top:75px;line-height:30px;font-size:9px;color:#666;display:none;">&nbsp;<span style="border-radius:3px;padding:0 3px;width:75px;display:inline-block;padding-right:10px;font-weight:bolder;font-size:133%;">&nbsp;</span> 买量：<span id="spB1V" style="border-radius:3px;padding:0 3px;width:75px;display:inline-block;padding-right:10px;font-weight:bolder;font-size:133%;">0</span> 卖量：<span id="spS1V" style="border-radius:3px;padding:0 3px;width:75px;display:inline-block;font-weight:bolder;font-size:133%;">0</span></div>
    </div>
    <script type="text/javascript" src="/assets/js/echarts.min.js"></script>
    <script type="text/javascript" src="/assets/js/echartsfunc.min.js"></script>
    <script type="text/javascript" src="/assets/js/echartsdata.min.js"></script>
    <script type="text/javascript">
        //设置颜色，_set0为黑色，_setf为白色
        var _sets = _setf;
        var _dom = document.getElementById("container");
        _dom.style.height = (_sets.frametop + _sets.h + _sets.h2 + 30) + "px";
        var _myChart = echarts.init(_dom);
        var _app = {};
        var _option = null;
        //品种代码 按接口提供参数,自行填写默认值
        var _symbol = "SH000001";
        //周期 1M,5M,15M,30M,1H,D,W 按接口提供参数
        var _period = "D";
        //本地web接口
        var _queryapi = "kms";
        var _num = 300;
        var _dzst = 30;
        var _dzed = 100;
        var _withws = false;
        var _mtype = "candlestick";
        //查询频率毫秒
        var _interval = 5000;
    </script>
    <script type="text/javascript">
        var _dates = [];
        var _data = [];
        var _datal = [];
        var _volumes = [];

        var _timer1 = null;
        $(function () {
            //从get获取symbol参数
            var symbol = qStr("symbol");
            if (symbol != undefined && symbol != "") {
                _symbol = symbol;
            }
            //从get获取period参数
            var period = qStr("p");
            if (period != undefined && period != "") {
                _period = period;
            }

            if (_period == "1M")
                _mtype = "line";

            request();
            startWs();
            //_timer1 = setInterval("timerDo()", _interval);
        });

        //设置颜色，_set0为黑色，_setf为白色
        function changeSet(t) {
            if (t == 0) { _sets = _set0; }
            else { _sets = _setf; }

            request();
        }

        var _doingflag = false;
        function timerDo() {
            try {
                if (!_doingflag) {
                    _doingflag = true;
                    wsheartbeat();
                    request();
                }
            }
            catch (e) { }
            _doingflag = false;
        }

        var _lstkticks = 0;
        var _lstticks = 0;
        var _prep = 0;
        var _preb1 = 0;
        var _pres1 = 0;
        function setP(tick, p, b1, s1, b1v, s1v, fix) {
            if (tick < _lstticks)
                return;

            _lstticks = tick;

            //console.log(new Date(_lstkticks*1000));

            if (p <= 0) { p = s1; }
            if (_prep == 0) { _prep = p; }
            if (_preb1 == 0) { _preb1 = b1; }
            if (_pres1 == 0) { _pres1 = s1; }

            if (_prep < p) { $("#spP").removeClass("corg").addClass("corr"); } else if (_prep > p) { $("#spP").removeClass("corr").addClass("corg"); }
            if (_preb1 < b1) { $("#spB1").removeClass("corg").addClass("corr"); $("#spB1V").removeClass("corg2").addClass("corr2"); } else if (_preb1 > b1) { $("#spB1").removeClass("corr").addClass("corg"); $("#spB1V").removeClass("corr2").addClass("corg2"); }
            if (_pres1 < s1) { $("#spS1").removeClass("corg").addClass("corr"); $("#spS1V").removeClass("corg2").addClass("corr2"); } else if (_pres1 > s1) { $("#spS1").removeClass("corr").addClass("corg"); $("#spS1V").removeClass("corr2").addClass("corg2"); }

            if (p <= 0) { p = s1; }
            if (b1 <= 0) { b1 = p; }
            if (s1 <= 0) { s1 = p; }

            $("#spP").html(p.toFixed(5));
            $("#spB1").html(b1.toFixed(5));
            $("#spS1").html(s1.toFixed(5));
            $("#spB1V").html(b1v);
            $("#spS1V").html(s1v);

            _prep = p;
            _preb1 = b1;
            _pres1 = s1;

            if (fix) {
                fixdata([{ Tick: tick, O: 0, H: 0, L: 0, C: p, V: 0 }]);
                render();
            }
        }
    </script>
</body>
</html>